<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        <p>
            <span>我是一个单纯的span</span>
        </p>
    </div>

    <ul>
        567
        <li>1</li>
        <li>2</li>
        <li class="item3">3</li>
        <li>4</li>
        <li>5</li>
    </ul>
    <script>
        // 获取元素的父节点
        let span = document.querySelector('span')
        console.log(span);
        // 获取父节点parentNode
        console.log(span.parentNode);
        // 获取爷爷
        console.log(span.parentNode.parentNode);

        // 获取子节点
        let ul = document.querySelector('ul')

        console.log(ul)
        // children 获取子元素
        console.log(ul.children);
        // childNodes 获取子节点
        console.log(ul.childNodes);

        // 获取第一个子元素
        console.log(ul.firstElementChild,'firstElementChild');
        
        // 获取最后一个子元素
        console.log(ul.lastElementChild,'firstElementChild');
        // 兄弟元素
        let item = document.querySelector('.item3')
        console.log(item);
        
        // 上一个兄弟
        console.log(item.previousElementSibling);
        
        // 下一个兄弟
        console.log(item.nextElementSibling);

        // 获取item所有兄弟节点
        console.log(item.parentNode.children);
        
        
        
        
    </script>
</body>
</html>